<template>
  <view class="main-box bg-white">
    <view class="container-box padding margin-top-xl text-center">
      <view class="radius padding-xl shadow-warp margin-top bg-white">
        <view class="text-bold text-xl text-black">
          微信授权登录
        </view>
        <view class="describe margin-top-sm">
          检查到您是首次使用小程序，申请获取以下权限 获得你的公开信息(昵称，头像等)
        </view>
        <button
          class="margin-top-lg bg-gradual-blue"
          type="primary"
          lang="zh_CN"
          open-type="getUserInfo"
          @click="wxLogin()"
        >
          授权登录
        </button>
        <button
          class="margin-top bg-gradual-red m-t-5"
          type="warn"
          lang="zh_CN"
          @click="goBack()"
        >
          我再看看
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      encryptedData: '',
      phoneIv: '',
      avatarUrl: '',
    };
  },
  onLoad() {},
  methods: {
    // 微信登录成功
    wxLogin() {
      uni.login({
        provider: 'weixin',
        scopes: 'auth_user',
        success(loginRes) {
          console.log('获取code成功', loginRes);
          // 这里记得配置 appid不然拿不到
          const { code } = loginRes;
          uni.setStorage({
            key: 'storage_Wxcode',
            data: code,
            success() {},
          });

          // 微信授权登录成功后跳转
          uni.navigateTo({
            url: '/pages/index/home/index',
          });

          // uni.navigateTo({
          //   url: '/pages/index/tabbar',
          // })

          //   //这里下面 微信小程序做了调整，这里可以考虑不调用
          //   uni.showModal({
          //     title: "提示",
          //     content:
          //       "检查到您是首次使用小程序，申请获取以下权限 获得你的公开信息(昵称，头像等)",
          //     showCancel: false,
          //     success: function (res) {
          //       if (res.confirm) {
          //         _that.getUserInfo();
          //       }
          //     },
          //   });
        },
      });
    },

    // 获取微信用户详细信息 （注意：这里 微信在新版本已经回收了权限，获取到的用户昵称 和 头像 都是 默认的 微信用户，和 默认头像）
    getUserInfo() {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      uni.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          uni.setStorage({
            key: 'storage_WxUserInfo',
            data: res.userInfo,
            success() {
              console.log('getUserInfo-res', res);
            },
          });
        },
      });
    },

    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  justify-content: center;
  height: 100vh;

  .container-box {
    margin-top: 240rpx;
  }
}
</style>
